<template>
  <div class="history-con">
    <div class="title_box">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane :label="boardLable" name="first" v-if="routerQuery.recordType == '01-01'"></el-tab-pane>
        <el-tab-pane :label="item.title" :name="item.id" v-for="item in tabsData" :key="item.id"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="board_con_box" v-if="routerQuery.recordType === '01-01' || tabsData.length">
      <template v-if="routerQuery.recordType === '01-01'">
        <div class="board_list">
          <div class="board_list_title">工作纪实</div>
          <div class="img_box img_box_one">
            <div v-if="formData.workConList && formData.workConList.length">
              <div v-for="(item, index) in formData.workConList" :key="item.id">
                <div class="one_week_top">
                  <span>{{ index + 1 }}.</span>
                  {{ item.workContent }}
                </div>
                <div class="one_week_bottom">
                  <span v-if="item.workTag">{{ item.workTag }} |</span>
                  <span v-if="item.finishStatus">{{ item.finishStatus == '1' ? '已完成' : '进行中' }} |</span>
                  <span v-if="item.finishPercent">完成量：{{ item.finishPercent }} |</span>
                  <span class="one_week_content4" v-if="item.workClassifyName">{{ item.workClassifyName }}</span>
                </div>
              </div>
            </div>
            <div class="pre_line" v-html="removeHtmlStyle(formData.workCon)"></div>
          </div>
        </div>
        <div class="board_list">
          <div class="board_list_title">工作计划</div>
          <div class="img_box img_box_one">
            <div v-if="formData.planConList && formData.planConList.length">
              <div v-for="(item, index) in formData.planConList" :key="item.id">
                <div class="one_week_top">
                  <span class="m-r-10">{{ index + 1 }}.</span>
                  {{ item.workContent }}
                </div>
                <div class="one_week_bottom">
                  <span v-if="item.workTag">{{ item.workTag }} |</span>
                  <span class="one_week_content4" v-if="item.workClassifyName">{{ item.workClassifyName }}</span>
                </div>
              </div>
            </div>
            <div class="pre_line" v-html="removeHtmlStyle(formData.planCon)"></div>
          </div>
        </div>
      </template>
      <template v-if="routerQuery.recordType === '01-05'">
        <div class="board_list" v-for="(item, index) in allData" :key="index">
          <EntrySound :listData="item" :entry="false"></EntrySound>
        </div>
      </template>
      <!-- 问题建议 -->
      <div class="szsy_item">
        <div class="szsy_box">
          <div class="szsy_box_title">问题建议</div>
          <div class="szsy_box_main" v-if="formData.proConList && formData.proConList.length > 0">
            <div v-for="item in formData.proConList" :key="item.id">
              <div class="arrract_one_main">
                <div class="attract_share_content" v-html="removeHtmlStyle(item.proCon)"></div>
                <div class="mar_upload" v-if="item.proFileList.length > 0">
                  <UploadPreview :file-list="item.proFileList" layout="list"></UploadPreview>
                </div>
              </div>
            </div>
          </div>
          <div class="attract_share_content" v-else>暂无数据</div>
        </div>
      </div>

      <div class="board_list">
        <div class="board_list_title">图片/视频/附件</div>
        <div class="img_box">
          <UploadPreview :file-list="formData.recordFileList" layout="list"></UploadPreview>
        </div>
      </div>
    </div>
    <div class="board_con_box" v-else>
      <Empty></Empty>
    </div>
  </div>
</template>

<script>
import UploadPreview from '@com/UploadPreview/index.vue'
import EntrySound from '../components/EntrySound'
import { getLastRecordFormThisId, listQuarterRecordTitles, getRecordDetailByPeriod } from '@apis/board.js'
export default {
  name: 'WriteHistory',
  components: { UploadPreview, EntrySound },
  props: {},
  data() {
    return {
      activeName: 'first',
      boardLable: '上周工作纪实',
      formData: {
        workCon: '', // 本月工作小结
        planCon: '', // 重点任务完成情况
        workConList: [], // 条目化本周
        planConList: [], // 条目化下周
        recordFileList: [], // 附件
        proConList: [], // 问题建议
      },
      routerQuery: {},
      allData: [
        {
          title: '本季度个人总结',
          entryCont: '',
          audioList: [],
          id: 'workCon',
          required: true,
        },
        {
          title: '教育培训情况',
          entryCont: '',
          audioList: [],
          id: 'eduCon',
        },
        {
          title: '奖惩情况',
          entryCont: '',
          audioList: [],
          id: 'rpCon',
          placeholder: '请输入奖惩情况',
        },
      ],
      tabsData: [],
    }
  },
  watch: {},
  computed: {},
  created() {
    this.routerQuery = this.$route.query
  },
  mounted() {
    if (this.routerQuery.recordType === '01-01') {
      this.getPageData()
    } else if (this.routerQuery.recordType === '01-05') {
      this.getTabsData()
    }
  },
  methods: {
    // 获取上周/上月工作纪实
    getPageData() {
      getLastRecordFormThisId({
        id: this.routerQuery.id,
      }).then(res => {
        if (res.code === 0 && res.data) {
          const data = res.data.data
          this.formData = Object.assign(this.formData, data)
          if (this.formData.formV1VO) {
            this.formData.workCon = this.formData.formV1VO.workCon
            this.formData.planCon = this.formData.formV1VO.planCon
            this.formData.recordFileList = this.formData.formV1VO.recordFileList
            this.formData.proConList = this.formData.formV1VO.proConList
          }
          if (this.formData.formV2VO) {
            if (this.formData.formV2VO.workConList && this.formData.formV2VO.workConList.length) {
              this.formData.workConList = this.formData.formV2VO.workConList.filter(item => {
                return item.workContent
              })
            }
            if (this.formData.formV2VO.planConList && this.formData.formV2VO.planConList.length) {
              this.formData.planConList = this.formData.formV2VO.planConList.filter(item => {
                return item.workContent
              })
            }
            if (!this.formData.recordFileList.length) {
              this.formData.recordFileList = this.formData.formV2VO.recordFileList
            }
            if (!this.formData.proConList.length) {
              this.formData.proConList = this.formData.formV2VO.proConList
            }
          }
          const arr = this.formData.proConList.filter(item => {
            return item.proCon.trim().length || item.proFileList.length
          })
          this.formData.proConList = arr
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    tabsClick() {
      if (this.routerQuery.recordType === '01-05') {
        this.getQuarterInit()
      }
    },
    getTabsData() {
      listQuarterRecordTitles({
        recordType: this.routerQuery.recordType,
        year: this.routerQuery.year,
        userId: this.routerQuery.userId,
        tenantId: localStorage.pskh_tenantId,
      })
        .then(res => {
          const { data } = res
          if (data.length > 0) {
            this.activeName = data[0].id
            this.tabsData = data
            this.getQuarterInit()
          }
        })
        .catch(() => {})
    },
    getQuarterInit() {
      getRecordDetailByPeriod({
        id: this.activeName,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.code === 0 && res.data) {
          this.formData = Object.assign(this.formData, res.data)
          this.allData[0].entryCont = res.data.workCon
          this.allData[0].audioList = res.data.workAudioList
          this.allData[1].entryCont = res.data.eduCon
          this.allData[1].audioList = res.data.eduAudioList
          this.allData[2].entryCont = res.data.rpCon
          this.allData[2].audioList = res.data.rpAudioList
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.history-con {
  display: flex;
  flex-direction: column;
  height: 100%;
  .title_box {
    height: 56px;
    // border-top: 4px solid #8499bc;
    /deep/.el-tabs__header {
      margin: 0;
      padding: 0 10px;

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 52px;
      }
    }
    /deep/.el-tabs__nav {
      display: flex;
      .el-tabs__active-bar {
        background-color: #0060c4;
      }
      .el-tabs__item.is-active {
        color: #0060c4;
      }
      .el-tabs__item {
        height: 52px;
        line-height: 52px;
        padding: 0 10px;
        &:hover {
          color: #0060c4;
        }
      }
    }
  }
  .board_con_box {
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    .board_list {
      margin-bottom: 10px;
      .board_list_title {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;
      }
      .img_box {
        padding: 15px;
        background-color: #e9eff48f;
      }
      .img_box_one {
        font-size: 14px;
        line-height: 26px;
        color: #666666;
        white-space: pre-wrap;
        .one_week_bottom {
          color: #666666;
          padding-left: 10px;
        }
      }
    }
    .szsy_box {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .szsy_box_title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      padding-top: 10px;
      width: 100%;
      text-align: left;
      padding-right: 10px;
      margin-bottom: 10px;
    }
    .arrract_one_main {
      width: 100%;
      word-break: break-all;
    }
    .szsy_box_main {
      padding: 10px;
      border: 1px solid #dddddd;
    }
    .attract_share_content {
      font-size: 14px;
      line-height: 26px;
      color: #666666;
      width: 100%;
      padding: 15px;
      background-color: #e9eff48f;
      margin-bottom: 10px;
      white-space: pre-line;
      .mar_upload {
        // padding: 10px;
      }
    }
  }
}
</style>
